<template>
    <div class="home_box">
        <!-- 首页面的头部 -->
    <header class="header_box" :class="{ active: !isTop }">
        <div class="middle_box" style="display:flex;align-items:center;justify-content:space-around;padding-right: 10px;">
            <input placeholder="请输入关键词" type="text"
                style="border-radius:20px;margin:10px;background:rgba(111, 222, 222, 0.6);border: none;padding-left: 20px;padding-left: 20px;padding-bottom: 5px;">
          <van-icon  name="search" color="#ccc"/>
        </div>
    
    </header>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for='item in carousels' :key='item.carouselUrl'>
                <img :src="item.carouselUrl" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :column-num="5" :border="false">
            <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字">
                <template #icon>
                    <div class="icon">zs</div>
                </template>
                <template #text>
                    <div class="text">严选</div>
                </template>
            </van-grid-item>
        </van-grid>
        <!-- 新品上线 -->
        <Goods :dataItem='newGoodses'>
            <template #title>
                <div>
                    <h3>新品上线</h3>
                </div>
            </template>
        </Goods>
        <!-- 热销商品 -->
        <Goods :dataItem="hotGoodses">
            <template #title>
                <div>
                    <h3>热销商品</h3>
                </div>
            </template>
        </Goods>
        <!-- 最新推荐 -->
        <Goods :dataItem="recommendGoodses">
            <template #title>
                <div>
                    <h3>最新推荐</h3>
                </div>
            </template>
        </Goods>
    </div>
</template>

<script>
import { getIndexInfo } from "../../api/index.js"
import Goods from "../../components/Goods.vue"
export default {
    name: "Home",
    components: {
        Goods
    },
    data() {
        return {
            isTop: true,
            carousels: [], // 轮播图数据
            hotGoodses: [], //热销商品的数据
            newGoodses: [], // 新品数据
            recommendGoodses: [], // 推荐数据
        };
    },
    mounted() {
        window.addEventListener("scroll", this.changeTop)
        this.getData(); // 发送ajax请求
    },
    methods: {
        // 发送ajax请求
        getData() {
            getIndexInfo().then(data => {
                // console.log("data:", data);
                this.carousels = data.data.carousels;
                this.hotGoodses = data.data.hotGoodses;
                this.newGoodses = data.data.newGoodses;
                this.recommendGoodses = data.data.recommendGoodses;
            })
        },
        changeTop() {
            let t = document.documentElement.scrollTop || document.body.scrollTop
            if (t > 50) {
                this.isTop = false; // 添加背景
            } else {
                this.isTop = true; // 移除背景
            }
        }
    },

};

</script>

<style lang="less" scoped>
input::-webkit-input-placeholder {
    color: #fafbfc;
    font-size: 14px;
}
.home_box {
    padding-bottom: 55px;
    .header_box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        z-index: 200;

        .left_box {
            width: 50px;
            background-color: rgba(0, 0, 0, .2);
        }

        .middle_box {
            flex: 1;
            background-color: rgba(255, 255, 0, .2);
        }

        .right_box {
            width: 50px;
            background-color: rgba(0, 0, 0, .2);
        }

        &.active {
            background: #1baeae;
        }
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        text-align: center;

        img {
            width: 100%;
            height: auto;
        }
    }

    .van-grid-item {
        height: 77px;

        .text {
            font-size: 12px;
            text-align: center;
        }

        .icon {
            color: #1baeae;
            font-size: 40px;
            text-align: center;
            margin-bottom: 7px;
        }
    }
}
</style>